<template>
  <div class="app-container">
    <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="企业名" prop="name">
        <el-input
          v-model="data.name"
          placeholder="请输入企业名"
          clearable
          @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="账号" prop="userName1">
        <el-input
          v-model="data.userName1"
          placeholder="请输入账号"
          clearable
          @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="data.status" clearable>
          <el-option v-for="(item,index) in statusOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" >
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="left" width="300px" >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === '1'"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row,'审核')"
            v-hasPermi="['zhcloud:shop:reject','zhcloud:shop:audit']"
          >审核</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row,'查看')"
            v-hasPermi="['zhcloud:shop:list']"
          >查看</el-button>
          <el-button
            v-if="scope.row.isservicestatus === '1'"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row,'业务类型审核')"
            v-hasPermi="['zhcloud:shop:reject','zhcloud:shop:audit']"
          >业务类型审核</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleResetPwd(scope.row)"
            v-hasPermi="['system:user:resetPwd']"
          >重置密码</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row,'选择角色')"
            v-hasPermi="['system:user:edit']"
          >选择角色</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row,'资料修改')"
            v-hasPermi="['zhcloud:shop:modify']"
          >资料修改</el-button>
        </template>
      </el-table-column>
      <!-- <af-table-column label="编号" align="center" prop="shopnum"/> -->
      <af-table-column label="账号" align="center" prop="userName" />
      <af-table-column label="昵称" align="center" prop="nickName" />
      <af-table-column label="公司名称" align="center" prop="allname"/>
      <af-table-column label="公司简称" align="center" prop="abbreviation"/>
      <af-table-column label="状态" align="center" prop="status">
        <template v-slot:default="scope">
          <el-tag>{{statusOptions.find(item=>item.value == scope.row.status).label}}</el-tag>
        </template>
      </af-table-column>
      <af-table-column label="公司法人" align="center" prop="qlegalperson"/>
      <!-- <af-table-column label="Logo" align="center" prop="alllogo">
        <template v-slot:default="scope">
          <el-image :src="scope.row.alllogo"  :preview-src-list="[scope.row.alllogo]">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </af-table-column> -->
      <!-- <af-table-column label="开户银行名" align="center" prop="allbankname"/> -->
      <!-- <af-table-column label="银行账户" align="center" prop="allbankaccount"/> -->
      <!-- <af-table-column label="省" align="center" prop="alladdr1">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.zh_province" :value="scope.row.alladdr1"/>
        </template>
      </af-table-column>
      <af-table-column label="市" align="center" prop="alladdr2">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.zh_city" :value="scope.row.alladdr2"/>
        </template>
      </af-table-column>
      <af-table-column label="区" align="center" prop="alladdr3">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.zh_area" :value="scope.row.alladdr3"/>
        </template>
      </af-table-column>
      <af-table-column label="详细地址" align="center" prop="alladdrfull"/> -->
      <af-table-column label="联系电话" align="center" prop="allphone1"/>
      <af-table-column label="税号" align="center" prop="qtaxnum"/>
      <!-- <af-table-column label="证照编号" align="center" prop="qcertnum"/> -->
      <!-- <af-table-column label="公司类型" align="center" prop="qcomptype"/> -->
      <!-- <af-table-column label="注册资本" align="center" prop="qcapital"/> -->
      <!-- <af-table-column label="注册资本币种" align="center" prop="qcapitalbz"/> -->
      <!-- <af-table-column label="证件类型" align="center" prop="q3is1"/> -->
      <!-- <af-table-column label="税务登记证" align="center" prop="qtaxi">
        <template v-slot:default="scope">
          <el-image :src="scope.row.qtaxI">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </af-table-column> -->
      <!-- <af-table-column label="组织机构代码证" align="center" prop="qorgI"/> -->
      <!-- <af-table-column label="注册时间" align="center" prop="q3is1"/>
      <af-table-column label="申请认证时间" align="center" prop="q3is1"/>
      <af-table-column label="认证通过时间" align="center" prop="q3is1"/> -->
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改仓库对话框 -->
    <el-dialog :title="title1" :visible.sync="open1" width="500px" append-to-body >
      <el-form ref="form" :model="form" label-width="100px">
      <el-row>
        <el-col  :span="24">
          <el-form-item label="原业务类型" prop="allname">
            <el-input v-model="form.tyewuleixing" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col  :span="24">
          <el-form-item label="审核业务类型" prop="allname">
            <el-input v-model="form.servicetype" :disabled="true"/>
          </el-form-item>
        </el-col>
        <div v-if="form.isservicestatus === 1" >
          <el-button
            v-hasPermi="['zhcloud:shop:audit']"
            type="primary" @click="submitForm('通 过1')">通 过</el-button>
          <el-button
            v-hasPermi="['zhcloud:shop:reject']"
            type="primary" @click="submitForm('驳 回1')">驳 回</el-button>
        </div>
      </el-row>
      </el-form>
    </el-dialog>
    <!-- 添加或修改仓库对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="14rem" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="formDisabled">
          <el-row>
            <el-col :span="item.span||8" v-for="(item,index) in formLabel" :key="index">
              <el-form-item :label="item.label" :prop="item.key">
                <div v-if="item.key==='alllogo'">
                  <el-image :src="form.alllogo" :preview-src-list="[form.alllogo]">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
                <div v-else-if="item.type===6">
                  <el-row>
                    <el-col :span="6" v-for="(opt,index) in item.options.value" :key="index">
                      <el-checkbox v-model="form[opt.key]" true-label="1" false-label="0">{{opt.label}}</el-checkbox>
                    </el-col>
                  </el-row>
                </div>
                <div v-else-if="item.type===7">
                  <UploadImg :ref="item.key"  @handleGetUrl="form[item.key]=$event" :src="form[item.key]" :disabled="formDisabled"></UploadImg>
                </div>
                <div v-else-if="item.type===0">
                  <el-input v-model="form[item.key]" :placeholder="`请输入${item.label}`" />
                </div>
                <div v-else-if="item.type===1">
                  <el-select v-model="form[item.key]" :placeholder="`请选择${item.label}`" >
                    <el-option v-for="(opt) in item.options.value"
                    :key="opt.value"
                    :label="opt.label"
                    :value="opt.value"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div v-else>
                  其他类型
                </div>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <div v-if="title ==='资料修改'" >
        <el-button type="primary" @click="submitForm('确 定')">确 定</el-button>
      </div>
      <div v-if="title ==='审核' && form.status === '1'" >
        <el-button
          v-hasPermi="['zhcloud:shop:audit']"
          type="primary" @click="submitForm('通 过')">通 过</el-button>
        <el-button
          v-hasPermi="['zhcloud:shop:reject']"
          type="primary" @click="submitForm('驳 回')">驳 回</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { ref } from '@vue/composition-api'
  import {list, updateShop,audit,reject,audit1,reject1,getUrl} from "@/api/shop/api";
  import {resetUserPwd} from "@/api/system/user";
  import UploadImg from '@/components/UploadImg'
  import {address} from '@/config/address'
  const form = {
    "abbreviation": "",//!简称
    "alladdr1": "",//!区
    "alladdr2": "",//!市
    "alladdr3": "",//!省
    "alladdrfull": "",//!详细地址
    "allbankaccount": "",//!银行账号
    "allbankaddr1": "",
    "allbankaddr2": "",
    "allbankname": "",//!开户银行
    "allemail": "",
    "allidcard": "",//!法人身份证号
    "allinvoicei": "",//!开票资料
    "alllogo": "",//企业logo
    "allname": "",//!公司名称
    "allpeople": "",//!联系人姓名
    "allphone1": "",//!联系电话/邮箱
    "belong": "1",//!认证类型
    "companyintroduce": "",
    "dztime": "",
    "ghandidcardi": "",
    "gidcardbacki": "",
    "gidcardi": "",
    "id": "",
    "isagent": "",//!国外代理
    "isbusiness": "",//!商城卖家
    "isbuyer": "",//!商城买家
    "iscustom": "",//!业务客户
    "ishuodai": "",//!货代公司
    "isopcer": "",//!开证公司
    "isplat": "",
    "issell": "",
    "isservicestatus": "",
    "issh": "",
    "isstorage": "",//!仓储公司
    "iswms": "",
    "keyword": "",
    "line": "",
    "mainvarieties": "",
    "openstatus": "",
    "q3is1": "",
    "qauthbook": "",//!授权书
    "qbanki": "",
    "qbusinesslicence": "",//!营业执照
    "qcapital": "",//!注册资本
    "qcapitalbz": "",//!币种
    "qcertnum": "",
    "qcomptype": "",//!公司类型
    "qlegalperson": "",//!公司法人
    "qorgi": "",
    "qtaxi": "",
    "qtaxnum": "",//!公司税号
    "reject": "",
    "servicetype": "",
    "shopcontacts": "",
    "shoplogo": "",
    "shopname": "",
    "shopnum": "",
    "shopphone": "",
    "status": "0",
    "vxappid": "",
    "vxsecret": "",
    "vxtoken": "",
    "vxtokentime": "",
    "wmsstop": ""
  }
  const qcapitalbzOption = ref([])
  const districtOptions = ref([])
  const cityOptions = ref([])
  const provinceOptions = ref([])
  const serviceTypeCheckbox = ref([])

  export default {
    dicts: ['zh_province','zh_area','zh_city'],
    name: "Shop",
    components:{
      UploadImg
    },
    data() {
      return {
        // 表单校验
        rules:{
          allname:{
            required:true,
            trigger:'blur',
            message:'请填写企业注册名称'
          },
          qtaxnum:{
            required:true,
            trigger:'blur',
            message:'请填写企业税号'
          },
          qlegalperson:{
            required:true,
            trigger:'blur',
            message:'请填写企业法人'
          },
          alladdr3:{
            required:true,
            trigger:'blur',
            message:'省不能为空'
          },
          alladdr2:{
            required:true,
            trigger:'blur',
            message:'市不能为空'
          },
          alladdr1:{
            required:true,
            trigger:'blur',
            message:'请填写企业地址'
          },
          alladdrfull:{
            required:true,
            trigger:'blur',
            message:'请填写详细街道'
          },
          allbankname:{
            required:true,
            trigger:'blur',
            message:'请填写开户银行名称'
          },
          allbankaccount:{
            required:true,
            trigger:'blur',
            message:'请填写银行账号'
          },
          allpeople:{
            required:true,
            trigger:'blur',
            message:'请填写企业联系人'
          },
          allphone1:[{
            required:true,
            trigger:'blur',
            message:'请填写联系人手机号'
          },{
            pattern:/^(?:(?:\+|00)86)?1\d{10}$/,
            trigger:'blur',
            message:'请输入正确的手机号码'
          }],
          qbusinesslicence:{
            required:true,
            trigger:'blur',
            message:'营业执照必须上传'
          },
          allinvoicei:{
            required:true,
            trigger:'blur',
            message:'开票资料必须上传'
          },
          qauthbook:{
            required:true,
            trigger:'blur',
            message:'授权书必须上传'
          },
        },
        formDisabled:false,
        formLabel:[
          {label:'Logo',key:'alllogo',type:0},
          {label:'公司全称',key:'allname',type:0},
          {label:"公司简称",key:'abbreviation',type:0},
          {label:"证照编号",key:'qcertnum',type:0},
          {label:"公司类型",key:'qcomptype',type:0},
          {label:"注册资本",key:'qcapital',type:0},
          {label:"币种",key:'qcapitalbz',type:1,options:qcapitalbzOption},
          {label:"公司法人",key:'qlegalperson',type:0},
          {label:"法人身份证号",key:'allidcard',type:0},
          {label:"税号",key:'qtaxnum',type:0},
          {label:"开户银行",key:'allbankname',type:0},
          {label:"银行账户",key:'allbankaccount',type:0},
          {label:"省",key:'alladdr1',type:1,options:provinceOptions},
          {label:"市",key:'alladdr2',type:1,options:cityOptions},
          {label:"区",key:'alladdr3',type:1,options:districtOptions},
          {label:"联系人姓名",key:'allpeople',type:0},
          {label:"联系电话",key:'allphone1',type:0},
          {label:"详细地址",key:'alladdrfull',type:0},
          {label:"业务类型",key:'tyewuleixing',type:6,options:serviceTypeCheckbox,span:24},
          {label:"营业执照",key:'qbusinesslicence',type:7},
          {label:"开票资料",key:'allinvoicei',type:7},
          {label:"授权书",key:'qauthbook',type:7},
        ],
        options: [],
        roleOptions: [],
        isDisabled:true,
        clientHeight: document.documentElement.clientHeight,
        tableHeight:500,// 定义table高度
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 仓库表格数据
        list: [],
        // 弹出层标题
        title: "",
        title1: "",
        open1: false,
        form:{...form},
        // 是否显示弹出层
        open: false,
        // 页码
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        // 页码
        data: {
          name: '',
          num:'',
          userName1:'',
          status:''
        },
        statusOptions:[
          {
            label:'未提交',
            value:'0'
          },
          {
            label:'待审核',
            value:'1'
          },
          {
            label:'驳回',
            value:'2'
          },
          {
            label:'审核通过',
            value:'3'
          },
          {
            label:'冻结',
            value:'4'
          },
          {
            label:'已删除',
            value:'-1'
          },
        ],

      };
    },
    mounted() {
      //  重置浏览器高度
      window.onresize = () => {
        this.clientHeight = document.documentElement.clientHeight;
      }

      setTimeout(()=>{
        qcapitalbzOption.value=[
          {label:'人民币',value:0},
          {label:'美元',value:1},
        ]

      },3000)
    },
    created() {
      this.getList();
      this.dictProvinceCityDistrict().then(response => {
        this.options = response.data;
      })
    },
    methods: {
      getList() {
        this.loading = true;
        list(this.data, this.queryParams).then(response => {
          this.list = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        //  初始值，自己定义
        this.tableHeight = this.clientHeight - 280
      },
      /** 重置密码按钮操作 */
      handleResetPwd(row) {
        this.$prompt('请输入"' + row.allname + '"的新密码', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          closeOnClickModal: false,
          inputPattern: /^.{5,20}$/,
          inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
        }).then(({ value }) => {
          resetUserPwd(row.userId, value).then(response => {
            this.$modal.msgSuccess("修改成功，新密码是：" + value);
          });
        }).catch(() => {});
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      }, // 表单重置
      submitForm(title) {
        this.loading = true;
        if('通 过' === title){
          this.$confirm('是否通过审核？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            audit(this.form.id).then(response => {
              if(response.code !== 200 ){
                this.$modal.msgError(response.msg);
              }else{
                this.$modal.msgSuccess("保存成功");
                this.getList();
                this.open = false;
              }
            });
          }).catch(() => {});
        }
        if('通 过1' === title){
          this.$confirm('是否通过审核？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            audit1(this.form.id).then(response => {
              if(response.code !== 200 ){
                this.$modal.msgError(response.msg);
              }else{
                this.$modal.msgSuccess("保存成功");
                this.getList();
                this.open1 = false;
              }
            });
          }).catch(() => {});
        }
        if('驳 回' === title){
          this.$prompt('回复消息', "是否驳回审核？", {
            confirmButtonText: "确定",
            cancelButtonText: "取消"
          }).then(({ value }) => {
            let data = {}
            data.id = this.form.id
            data.reject = value
            reject(data).then(response => {
              if(response.code !== 200 ){
                this.$modal.msgError(response.msg);
              }else{
                this.$modal.msgSuccess("保存成功");
                this.getList();
                this.open = false;
              }
            });
          }).catch(() => {});
        }
        if('驳 回1' === title){
          this.$confirm('是否驳回审核？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            reject1(this.form.id).then(response => {
              if(response.code !== 200 ){
                this.$modal.msgError(response.msg);
              }else{
                this.$modal.msgSuccess("保存成功");
                this.getList();
                this.open1 = false;
              }
            });
          }).catch(() => {});
        }
        if('确 定' === title){
          this.$confirm('是否修改资料？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            updateShop(this.form).then(response => {
              if(response.code !== 200 ){
                this.$modal.msgError(response.msg);
              }else{
                this.$modal.msgSuccess("保存成功");
                this.getList();
                this.open = false;
              }
            });
          }).catch(() => {});
        }
        this.loading = false;
      },
      handleUpdate(row,title) {
        provinceOptions.value = address
        cityOptions.value=provinceOptions.value.find(item=>item.value==row.alladdr1).children
        districtOptions.value=cityOptions.value.find(item=>item.value==row.alladdr2).children
        row.alladdr1=Number(row.alladdr1)
        row.alladdr2=Number(row.alladdr2)
        row.alladdr3=Number(row.alladdr3)

        serviceTypeCheckbox.value=[
          {label:'商城卖家',key:'isbusiness'},
          {label:'商城买家',key:'isbuyer'},
          {label:'业务客户',key:'iscustom'},
          {label:'货代公司',key:'ishuodai'},
          {label:'开证公司',key:'isopcer'},
          {label:'国外代理',key:'isagent'},
          {label:'仓储公司',key:'isstorage'},
        ]


        this.formDisabled = false
        if('资料修改' === title || '审核' === title || '查看' === title) {
          if('查看' === title || '审核' === title){
            this.formDisabled = true
          }
          row.roles = new Array()
          this.form = Object.assign({}, row);
          this.form.addr123 = [row.alladdr1, row.alladdr2, row.alladdr3]
          this.open = true;
          this.title = title;

        }
        if('业务类型审核' === title) {
          row.roles = new Array()
          this.form = Object.assign({}, row);
          this.open1 = true;
          this.title1 = title;
        }
        if('选择角色' === title){
          this.$router.push("/system/user-auth/role/" + row.userId+"?url=/storage/shop");
        }
      }
    }
  };
</script>
